<template>
  <v-card flat class="List-container rounded-lg">
    <v-toolbar tile elevation="0" color="#626C84" height="40" dense>
      <div class="list-title">{{ propTitle }}</div>
      <v-spacer></v-spacer>
      <MenuList v-if="propShowMenu">
        <template #default="{ on }">
          <v-btn v-on="on" icon width="40" height="40">
            <v-icon color="#fff">mdi-dots-vertical</v-icon>
          </v-btn>
        </template>
        <template #item>
          <slot name="menu-list-item"> </slot>
        </template>
      </MenuList>
    </v-toolbar>
    <v-list
      v-if="propList && propList.length > 0"
      class="list-wrap pa-2"
      two-line
    >
      <v-list-item-group
        v-model="selectedValue"
        class="text-left"
        active-class="active"
      >
        <v-list-item
          @click="clickItem(item)"
          v-for="item in propList"
          :key="item.id"
          class="mb-2 py-1 rounded-lg"
        >
          <template>
            <slot name="item" :item="item"></slot>
          </template>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, Watch, ModelSync } from "vue-property-decorator";
import MenuList from "@/components/Menu/MenuList.vue";
@Component({
  components: {
    MenuList,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    "show-menu": {
      type: Boolean,
      default: true,
    },
    title: String,
  },
})
export default class List extends Vue {
  @ModelSync("value", "input", { type: Number }) selectedValue!: number;
  get propList() {
    return this.$props.list;
  }

  get propShowMenu() {
    return this.$props.showMenu;
  }

  get propTitle() {
    return this.$props.title;
  }

  @Watch("selectedValue")
  onSelectedChange(index: number | undefined) {
    this.$emit("change", index);
  }

  clickItem(item: object) {
    this.$emit("click", item);
  }
}
</script>
<style lang="scss" scoped>
@import "./List.scss";
</style>
